<template>
    <div class="confirmloan">
        <div class="confirmloanTop">
            Xác nhận số tiền
        </div>

        <!-- <div class="tip">
            <img src="@/assets/tipIcon2.png" alt="">
            <p>lưu ý : không thanh toán cho bất cứ tài khoản cá nhân nào</p>
        </div> -->

        <div class="confirmloanContentWapper">
            <div class="bgColor"></div>
            <div class="repayContent">
                <div class="confirmLoanAdvantage">
                    <img src="@/assets/advantage.png" alt="">
                </div>
                <div class="moneyWapper">
                    <div class="moneyTitle">Số tiền cần thanh toán(₫)</div>
                    <div class="money">{{ Number(loanCalculationInfo.loanAmount).toLocaleString() }}</div>
                </div>

                <div class="repayData">
                    <div class="dataItem">
                        <p class="dataName">Lãi xuất</p>
                        <p class="dataValue">{{ Number(loanCalculationInfo.interest) }}₫</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Phí báo cáo tín dụng</p>
                        <p class="dataValue">{{ Number(loanCalculationInfo.creInvestFee) }}₫</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Phí dịch vụ</p>
                        <p class="dataValue">{{ Number(loanCalculationInfo.serviceFee) }}₫</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Phí thnah toán</p>
                        <p class="dataValue">{{ Number(loanCalculationInfo.channelFee) }}₫</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Cho vay ngày</p>
                        <p class="dataValue">{{ loanCalculationInfo.loanDate }}</p>
                    </div>
                    <div class="dataItem">
                        <p class="dataName">Ngàn cần thanh toán</p>
                        <p class="dataValue">{{ loanCalculationInfo.repaymentDate }}</p>
                    </div>
                </div>

                <div class="banNumberArea" @click="toBankCardListPage">
                    <div class="bankCardLeft">
                        <img src="@/assets/bankCard.png" alt="">
                        <div class="accountArea">
                            <div class="accountDesc">
                                Số tài khoản nhận tiền
                            </div>
                            <div class="accounNum">{{ formatString(loanCalculationInfo.bkNo) }}</div>
                        </div>
                    </div>
                    <div class="bankCardRight">
                        <img src="@/assets/jiantou_right.png" alt="">
                    </div>
                </div>

                <!-- <div class="confirmLoanBottomTip">
                    Nếu bạn không bỏ cuộc trong vòng 30:00, khoản vay sẽ tự động được cấp.
                </div> -->

                <div class="confirmloanBtn" @click="clickConfirmLoanBtn">
                    Xác nhận ứng dụng
                </div>
            </div>
        </div>

        <!-- <div class="refreshBtn">
            img
        </div> -->

        <div class="detailDialog" v-if="showDialog">
            <div class="detailContent">
                <div class="detailTitle">Chi tiết thanh toán</div>
                <div class="detailDialogData">
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Số tiền giải ngân</p>
                        <p class="dialogdataValue">{{ '3,608,692' }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Lãi xuất</p>
                        <p class="dialogdataValue">{{ '3,608,692' }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí báo cáo tín dụng</p>
                        <p class="dialogdataValue">{{ '3,608,692' }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí thanh toán</p>
                        <p class="dialogdataValue">{{ '3,608,692' }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí phục vụ</p>
                        <p class="dialogdataValue">{{ '3,608,692' }}₫</p>
                    </div>
                    <div class="dialogDataItem">
                        <p class="dialogdataName">Phí quá hạn</p>
                        <p class="dialogdataValue">{{ '3,608,692' }}₫</p>
                    </div>

                </div>
                <div class="dialogConfirmBtn" @click="() => showDialog = !showDialog">
                    Đã hiểu
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang='ts'>
import api from '@/api';
import router from '@/router';
import { useOverAllStore } from '@/stores/overAll';
import { getItem } from '@/utils/token-utils';
import { formatString } from '@/utils/toolsUtils';
import { Toast } from 'tdesign-mobile-vue';
import { onMounted, ref } from 'vue';

// let confirmloanMoney = ref(3400000)

let overAllStore = useOverAllStore()
const initLoanCalculationInfo = () => ({
    bankCode: '',
    bkId: '',
    bkNo: '',
    channelFee: '',
    countDownTime: '',
    couponList: [],
    creInvestFee: '',
    firstOrAgain: '',
    interest: '',
    isBankCardVerified: '',
    loanAmount: '',
    loanCount: '',
    loanDate: '',
    loanOfApplyId: '',
    repayCount: '',
    repaymentDate: '',
    serviceFee: '',
    speciFlagOfBk: '',
    taxAmt: '',
})
let loanCalculationInfo = ref(initLoanCalculationInfo())


let showDialog = ref(false)

const getLoanCalculationInfoHandler = async () => {
    let applyId = router.currentRoute.value.query.applyId
    try {
        let loanCalculationRes = (await api.getLoanCalculationInfo({
            uuid: getItem('uuid'),
            token: getItem('token'),
            applyId: applyId
        })).data

        if (loanCalculationRes.code == 0) {
            loanCalculationInfo.value = loanCalculationRes.data
        } else if (loanCalculationRes.code == 20) {
            router.replace({
                path: '/xunnang'
            })
        } else if (loanCalculationRes.code == 5) {
            router.replace({
                path: '/home'
            })
        } else {
            Toast({
                message: loanCalculationRes.message,
                duration: 3 * 1000
            })
        }
    } catch (error) {
        console.log(error);

    }
}


const toBankCardListPage = ()=>{
    router.push({
        path:'/bankCardList'
    })
}


const clickConfirmLoanBtn = async () => {
    let applyId = router.currentRoute.value.query.applyId
    try {
        let confirmLoanRes = (await api.confirmLoanHandler({
            uuid: getItem('uuid'),
            token: getItem('token'),
            applyId: applyId,
            bkId: loanCalculationInfo.value.bkId,
            byTimer: 'false'
        })).data
        if (confirmLoanRes.code == 0 || confirmLoanRes.code == 25) {
            router.replace({
                path: '/home'
            })
        } else if (confirmLoanRes.code == 20) {
            router.replace({
                path: '/xunnang'
            })
        } else {
            Toast({
                message: confirmLoanRes.message
            })
        }

    } catch (error) {
        console.log(error);
        
    }
}


onMounted(() => {
    if (!overAllStore.homeScreensData.scienFlag) {
        overAllStore.getHomeScreenStoreHandler({
            uuid: getItem('uuid'),
            token: getItem('token')
        })
    }
    getLoanCalculationInfoHandler()
})
</script>

<style scoped>
.confirmloan {
    height: 100%;

    .detailDialog {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;

        .detailContent {
            width: 85%;
            background-color: white;
            border-radius: .6rem;
            padding: 1rem;

            .detailTitle {
                font-family: SF Pro, SF Pro;
                font-weight: 600;
                font-size: .9rem;
                color: #292B33;
                line-height: 1.3rem;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin-bottom: .8rem;
            }

            .dialogDataItem {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: .6rem;

                font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: .7rem;
                color: #9599A6;
                line-height: 1.1rem;
                text-align: left;
                font-style: normal;
                text-transform: none;

                .dialogdataValue {
                    color: #292B33;
                }
            }

            .dialogConfirmBtn {

                height: 2.2rem;
                background-color: #009959;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: .2rem;

                /* font-family: SF Pro, SF Pro; */
                font-weight: 600;
                font-size: .8rem;
                color: #FFFFFF;
                line-height: 1.2rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }



    }

    .confirmloanTop {
        width: 100%;
        min-height: 2.3rem;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: SF Pro, SF Pro;
        font-weight: 600;
        font-size: .9rem;
        color: #FFFFFF;
        line-height: 1.3rem;
        text-align: center;
        font-style: normal;
        text-transform: none;
        background-color: #009959;
    }

    .tip {
        background-color: #FFF7EB;
        padding: .35rem .6rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        &>img {
            display: block;
            width: .8rem;
            height: .8rem;
            margin-right: .15rem;
        }

        &>p {
            /* font-family: SF Pro, SF Pro; */
            font-weight: 400;
            font-size: .6rem;
            color: #FF9326;
            /* line-height: 1.1rem; */
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .confirmloanContentWapper {
        width: 100%;
        height: calc(100% - 2.3rem - 2.75rem);
        overflow: scroll;
        background-color: #F7F7FA;
        position: relative;
        z-index: 0;
        padding: 1rem;

        .bgColor {
            /* width: 100%; */
            height: 15rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            z-index: -1;
            background: linear-gradient(360deg, rgba(0, 179, 105, 0) 0%, #009959 100%);
        }

        .repayContent {
            /* margin: .8rem; */
            /* padding: .8rem; */
            border-radius: .6rem;
            box-sizing: border-box;
            background-color: white;
            overflow: hidden;

            .confirmLoanAdvantage {
                width: 100%;

                &>img {
                    width: 100%;
                }
            }

            .banNumberArea {
                /* margin: .8rem; */
                margin: 0 .8rem .8rem .8rem;
                padding: .4rem;
                background-color: #F7F7FA;
                border-radius: .4rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .bankCardLeft {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    &>img {
                        display: block;
                        width: 1.6rem;
                        height: 1.6rem;
                        margin-right: .6rem;
                    }

                    .accountDesc {
                        /* font-family: SF Pro, SF Pro; */
                        font-weight: 400;
                        font-size: .7rem;
                        color: #626673;
                        line-height: 1.1rem;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .accounNum {
                        /* font-family: SF Pro, SF Pro; */
                        font-weight: 600;
                        font-size: .8rem;
                        color: #292B33;
                        line-height: 1.2rem;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }

                .bankCardRight {
                    &>img {
                        display: block;
                        width: .8rem;
                        height: .8rem;
                    }
                }
            }

            .moneyWapper {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 1rem;

                .moneyTitle {
                    font-family: SF Pro, SF Pro;
                    font-weight: 400;
                    font-size: .7rem;
                    color: #9599A6;
                    line-height: 1.1rem;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }

                .money {
                    /* font-family: DIN Alternate, DIN Alternate; */
                    font-weight: bold;
                    font-size: 2rem;
                    color: #292B33;
                    line-height: 2.4rem;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .confirmloanDetail {
                background-color: #F7F7FA;
                border-radius: .2rem;
                padding: .6rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &>img {
                    display: block;
                    width: .8rem;
                    height: .8rem;
                }

                &>p {
                    /* font-family: SF Pro, SF Pro; */
                    font-weight: 400;
                    font-size: .7rem;
                    color: #626673;
                    line-height: 1.1rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .repayData {
                padding: .8rem;

                .dataItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: .6rem;

                    font-family: SF Pro, SF Pro;
                    font-weight: 400;
                    font-size: .7rem;
                    color: #9599A6;
                    line-height: 1.1rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;

                    .dataValue {
                        color: #292B33;
                    }
                }
            }

            .confirmLoanBottomTip {
                margin: 0 .8rem;
                text-align: center;


                /* font-family: SF Pro, SF Pro; */
                font-weight: 400;
                font-size: .7rem;
                color: #626673;
                line-height: 1.1rem;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .confirmloanBtn {
                height: 2.4rem;
                border-radius: 1.2rem;
                margin: 0 .8rem;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 1rem;
                margin-bottom: .8rem;
                background: linear-gradient(94deg, #F9A848 0%, #F7941D 100%);
                /* font-family: SF Pro, SF Pro; */
                font-weight: 600;
                font-size: .9rem;
                color: #FFFFFF;
                line-height: 1.3rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }


}
</style>